<template>
	<div class="form-box clear">
		<span class="icon-frame left">
			<img class="input-icon" :src="g.path.images+'/'+icon+'.png'">
		</span>
		<input @blur="onBlur_accountInput" :type="type" @focus="onFocus_inputFocus" class="g-input left"
			   :placeholder="placeholder" @input="onInput_value" @keyup.enter="onKeyupEnter_searchInput"
			   v-model="inputContent" :maxLength="maxLength" :readonly="readonly" autocomplete="off"
			   :disabled="disabled">
		<img v-show="inputContent.length > 0 && isFocused" class="close-search-btn absolute pointer"
			 :src="g.path.images+'/close-popup.png'" alt="" @click="onClick_closeBtn">
	</div>
</template>
<script type="text/ecmascript-6">
	import g from "../global";

	export default {
		created()
		{
			this.init();
		},
		props: {
			value: {
				type: String,
				default: ""
			},
			type: {
				type: String,
				default: "text"
			},
			icon: {
				type: String,
				default: ""
			},
			placeholder: {
				type: String,
				default: ""
			},
			disabled: {
				type: Boolean,
				default: false
			},
			maxLength: {
				type: Number
			},
			isShowClearBtn: {
				type: Boolean,
				default: true
			}
		},
		data()
		{
			return {
				g: g,
				isFocustips: false,
				inputContent: this.value,
				isDisplay: false,
				isFocused:false
			}
		},
		watch: {
			value($val)
			{
				this.init();
				trace(this.disabled)
			}
		},
		methods: {
			init()
			{
				this.inputContent = this.value;
			},
			onBlur_accountInput(e)
			{
				this.isFocused= false;
				this.$emit("blur", e);
			},
			onFocus_inputFocus(e)
			{
				this.isFocused = true;
				this.$emit("focus", e);
			},
			onMouseOver_formInput()
			{
				if (this.inputContent.length > 0)
				{
					this.isDisplay = true;
				}
			},
			onMouseOut_formInput()
			{
				this.isDisplay = false;
			},
			onKeyupEnter_searchInput(e)
			{
				this.$emit('keyenter', e);
			},
			onInput_value(e)
			{
				this.$emit('input', this.inputContent);
			},
			onClick_closeBtn()
			{
				this.inputContent = "";
				this.$emit('input', this.inputContent);
			}
		}
	}
</script>
<style lang="sass" rel="stylesheet/scss" type="text/scss">
</style>